<template>
  <EnteringForm
    ref="enteringForm"
    v-bind="dialog"
		width="80%"
    @close="close"
		:showFooter="false"
  >
    <el-form ref="formRef" :model="queryParams" :rules="rules">
      <el-row type="flex" style="flex-wrap: wrap">
				<el-col :span="6">
          <el-form-item label="编号:" prop="id">
            <el-input
              v-model.trim="queryParams.id"
              placeholder="请输入"
							disabled
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
				<el-col :span="6">
          <el-form-item label="优惠券名称:" prop="name">
            <el-input
              v-model.trim="queryParams.name"
              placeholder="请输入"
							disabled
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
				<el-col :span="6">
          <el-form-item label="面值:" prop="name">
            <el-input
              :value="queryParams.faceValue + '元'"
              placeholder="请输入"
							disabled
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
				<el-col :span="6">
          <el-form-item label="有效期:">
            <el-input
              v-model.trim="queryParams.expireDay"
              placeholder="请输入"
							disabled
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        
      </el-row>
    </el-form>
		<!-- 分割线 -->
		<el-divider></el-divider>
		<!-- 表格 -->
		<div>
        <el-form>
          <el-row :gutter="20">
            <el-col :xs="6" :sm="6" :lg="6">
              <el-form-item label="商家">
                <el-select
                  v-model="search.sellerId"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in shopList"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
          <el-form-item label="用户:">
            <el-input
              v-model.trim="search.userId"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-form-item label="是否使用">
                <el-select
                  v-model="search.used"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
						<el-col :xs="6" :sm="6" :lg="6">
              <el-form-item label="是否失效">
                <el-select
                  v-model="search.invalid"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
              <el-button icon="Refresh" @click="()=>{ search = {pageNum:1, pageSize:10}; getList() }">重置</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table
                :data="listData"
                v-loading="loading"
                ref="table"
                style="margin-top: 20px"
              >
                <el-table-column label="#" type="index" align="left" />
                <el-table-column label="编号" prop="couponId" align="left" />
                <el-table-column label="优惠券名称" prop="couponName" align="left" />

                <el-table-column label="面值(元)" prop="faceValue" align="left" />
                <el-table-column label="有效期" prop="endTime" align="left" />
                <el-table-column label="适用店铺" prop="storeName" align="left" />
                <el-table-column label="用户" prop="userId" align="left" />
                <el-table-column label="领取时间" prop="createTime" align="left" />
                <el-table-column label="消费时间" prop="consumeTime" align="left" />
                <el-table-column label="状态"  align="left">
                  <template #default="scope">
                    <div style="font-weight: bold" :style="{color: scope.row.used==1 ? '#1a9b34' : scope.row.used==0 ? '#ff241a' : ''}">
                      {{ scope.row.used==1 ? '已使用' : scope.row.used==0 ? '未使用' : '' }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="是否失效"  align="left">
                  <template #default="scope">
                    <div style="font-weight: bold" :style="{color: scope.row.invalid==1 ? '#ff241a' : scope.row.invalid==0 ? '#1a9b34' : ''}">
                      {{ scope.row.invalid==1 ? '已失效' : scope.row.invalid==0 ? '未失效' : '' }}
                    </div>
                  </template>
                </el-table-column>

              </el-table>
              <Pagination
                v-show="total"
                v-model:page="search.pageNum"
                v-model:limit="search.pageSize"
                :total="total"
                @pagination="getList"
              />
            </el-col>
          </el-row>
        </el-form>
      </div>
  </EnteringForm>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { listPage, info, add, edit, del, changeStatusApi, useInfoApi } from '@/api/operates/coupon.js'
import { listPage as shopListApi } from '@/api/operates/shopList/index'

const { proxy } = getCurrentInstance()
const emit = defineEmits(["success"]);
const dialogType = ref('')
const shopList = ref([])
const dialog = reactive({
  visible: false,
  title: "",
});
const rules = reactive({});
const loading = ref(false);
const total = ref(0)
const queryParams = ref({
	enable: 1,
	recommend: 0,
})
const search = ref({
  pageNum: 1,
  pageSize: 10,
})
const listData = ref([])

function handleSearch(){
  search.value.pageNum = 1
  getList()
}
function init(type, record){
  getShopList()
	dialogType.value = type
	dialog.title='使用记录'
	dialog.visible = true
	// 如果是编辑，回显数据
	if(dialogType.value=='edit'){
		queryParams.value = { ...record };
		// 查询表格
		getList()
	}
};

//获取列表数据
const getList = () => {
  loading.value = true
  let query = {
    path:{
			id: queryParams.value.id
		},
		query: {
      
      ...search.value
    }
  }
  useInfoApi(query)
    .then(res => {
      listData.value = res.data.list
      total.value = res.data.total
      loading.value = false
    })
    .catch(err => {
      loading.value = false
      ElMessage.error(err.message || `${text}失败`)
    })
}

function getShopList(){
  shopListApi({pageNum:1, pageSize:100000}).then((res)=>{
    shopList.value = res.data.list
  })
}
function close(){
  dialog.visible = false;
  proxy.$refs.formRef.resetFields();
	queryParams.value = {}
};
defineExpose({ init });
</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
:deep(.el-input__wrapper){
	width: 100%;
}
</style>
